<script type="text/javascript">
$(window).load(function(){
	  collage();  	
})

  function collage() {
  $('.Collage').removeWhitespace().collagePlus(
      {
          'fadeSpeed'     : 500,
          'targetHeight'  : 220,
          'allowPartialLastRow' : true,
          'padding':10
      }
  );
	};
	
// This is just for the case that the browser window is resized
var resizeTimer = null;
$(window).bind('resize', function() {
  // hide all the images until we resize them
	//$('.Collage').css("opacity", 0);
  // set a timer to re-apply the plugin
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(collage, 200);

});

</script>
<!-- .main -->
<div class="main">

	<!-- .works -->
	<div class="works" id="page_works">
	<div class="Collage">	
		
		<?php foreach ($works as $w):?>
		<div class="Image_Wrapper" data-caption=''>

		<div class="img_wrap">
		<a href="<?=site_url('fr/works')?>/<?=$w->id?>">
		<img src="<?=base_url()?>uploads/thumbs/<?=$w->photo->filename_s?>" width="600" height="400">
		</a>
		</div>
		<div class="Wrapper_BG" onclick="document.location.href='<?=site_url('fr/works')?>/<?=$w->id?>'">
			<div class="title">
			<?=$w->name?>
			<br><br>
			<i class="glyphicon glyphicon-search"></i>
			</div>
			
		</div>
		</div>
		<?php endforeach;?>

	</div>
	
	</div>
	<!-- /.works -->
	<!-- .reference -->
	<div class="reference" id="reference_work">
		<!-- .reference_container -->
		<div class="reference_container" >
	
		<span class="subtitle">NOS CARACTÉRISTIQUES</span>
		
		
		<div class="clear"></div>
		<!-- .reference_item -->
		<div class="reference_item">
		<span>IDENTITÉ AND LOGO</span>
		<li><a href="#">Identité visuelle</a></li>
		<li><a href="#">Logotype</a></li>
		<li><a href="#">Carte de visite</a></li>
		</div>
		<div class="reference_item">
		<span>IMPRIMERIE ET ÉDITION</span>
		<li><a href="#">Affiche</a></li>
		<li><a href="#">Carte de voeux</a></li>
		<li><a href="#">Invitation</a></li>
		<li><a href="#">Brochure</a></li>
		<li><a href="#">Flyer</a></li>
		<li><a href="#">Roll-Up</a></li>
		<li><a href="#">Catalogue</a></li>
		</div>
		<div class="reference_item">
		<span>WEB & MULTIMÉDIA</span>
		<li><a href="#">Institutional Site</a></li>
		<li><a href="#">Newsletter</a></li>
		<li><a href="#">Bannière</a></li>
		<li><a href="#">E-mailing</a></li>
		<li><a href="#">Présentation</a></li>
		<li><a href="#">Catalogue</a></li>
		</div>
		<div class="reference_item">
		<span>ILLUSTRATION</span>
		<li><a href="#">Portrait</a></li>
		<li><a href="#">Illustration Numérique</a></li>
		</div>
		<div class="reference_item">
		<span>PHOTOGRAPHIE</span>
		<li><a href="#">Photographie Commerciale</a></li>
		<li><a href="#">Photographie Nature Morte</a></li>
		<li><a href="#">Retouche Numérique</a></li>
		</div>
		<div class="clear"></div>
		</div>
		<div class="clear"></div>
		</div>
		<!-- /.reference_item -->
		<div class="clear"></div>
	</div>
	<!-- /.reference -->
</div>

<!-- /.main -->